<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Album example · Bootstrap v5.1</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">

    

    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    
  </head>
  <body>
    <body background="../static/海浪.gif" style="background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed" type="image/gif">
<header>
  <div class="collapse bg-dark" id="navbarHeader">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">About</h4>
          <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">Contact</h4>
          <ul class="list-unstyled">
            <li><a href="#" class="text-white">Follow on Twitter</a></li>
            <li><a href="#" class="text-white">Like on Facebook</a></li>
            <li><a href="#" class="text-white">Email me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
          <svg t="1641400905568" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5847" width="100" height="100"><path d="M216.234667 165.888h543.914666a47.786667 47.786667 0 0 1 47.786667 47.786667v597.333333a47.786667 47.786667 0 0 1-47.786667 47.786667H263.850667a47.786667 47.786667 0 0 1-47.786667-47.786667V165.888h0.170667z" fill="#FFE3BA" p-id="5848"></path><path d="M265.557333 108.032A47.957333 47.957333 0 0 0 216.234667 153.6v659.285333a47.786667 47.786667 0 0 1 49.322666-46.250666h61.610667V108.032z" fill="#FFC670" p-id="5849"></path><path d="M855.210667 774.485333a34.133333 34.133333 0 0 1-48.298667 0l-96.597333-96.597333L733.866667 653.824l24.064-24.234667 96.597333 96.597334a34.133333 34.133333 0 0 1 0.682667 48.298666z" fill="#F6716F" p-id="5850"></path><path d="M563.2 482.474667m-170.666667 0a170.666667 170.666667 0 1 0 341.333334 0 170.666667 170.666667 0 1 0-341.333334 0Z" fill="#FFF6E6" p-id="5851"></path><path d="M395.434667 304.298667h72.533333a17.066667 17.066667 0 1 0 0-34.133334h-72.533333a17.066667 17.066667 0 0 0 0 34.133334zM655.701333 705.365333h-48.469333a17.066667 17.066667 0 0 0 0 34.133334h48.469333a17.066667 17.066667 0 0 0 0-34.133334zM529.92 705.365333h-134.485333a17.066667 17.066667 0 0 0 0 34.133334h134.485333a17.066667 17.066667 0 0 0 0-34.133334z" fill="#3D3D63" p-id="5852"></path><path d="M867.328 714.069333l-42.496-42.325333V213.504a64.682667 64.682667 0 0 0-64.682667-64.682667H344.234667V108.032a17.066667 17.066667 0 0 0-17.066667-17.066667h-61.610667A65.024 65.024 0 0 0 199.168 153.6v657.066667a64.682667 64.682667 0 0 0 64.682667 64.682666h496.298666a64.682667 64.682667 0 0 0 64.682667-64.682666v-10.410667a51.2 51.2 0 0 0 42.496-86.869333zM233.301333 153.6a30.890667 30.890667 0 0 1 32.256-29.184h44.544v622.933333h-44.544a68.266667 68.266667 0 0 0-32.256 8.021334z m526.848 688.298667H263.850667a29.866667 29.866667 0 1 1 1.706666-59.733334h61.610667a17.066667 17.066667 0 0 0 17.066667-17.066666V182.954667h415.914666a30.549333 30.549333 0 0 1 30.549334 30.549333v424.106667l-19.968-19.968a17.066667 17.066667 0 0 0-24.234667 0l-11.946667 11.946666-27.136-27.136A187.733333 187.733333 0 1 0 411.306667 372.565333h-15.872a17.066667 17.066667 0 0 0-17.066667 17.066667 17.066667 17.066667 0 0 0 13.482667 17.066667 186.709333 186.709333 0 0 0 27.648 196.949333h-24.064a17.066667 17.066667 0 0 0 0 34.133333h61.610666A187.733333 187.733333 0 0 0 682.666667 626.688l27.136 27.136-11.946667 12.117333a17.066667 17.066667 0 0 0 0 24.064l92.330667 92.501334v28.842666a30.549333 30.549333 0 0 1-30.037334 30.549334zM409.6 482.474667a153.6 153.6 0 1 1 153.6 153.6 153.6 153.6 0 0 1-153.6-153.6z m433.493333 279.893333a17.066667 17.066667 0 0 1-24.064 0l-85.333333-85.333333 24.064-24.064 84.48 84.48a17.066667 17.066667 0 0 1 0.853333 24.917333z" fill="#3D3D63" p-id="5853"></path><path d="M614.4 556.032a17.066667 17.066667 0 0 0-17.066667-17.066667h-17.066666v-101.205333h28.501333V443.733333a17.066667 17.066667 0 1 0 34.133333 0v-22.186666a17.066667 17.066667 0 0 0-17.066666-17.066667h-125.269334a17.066667 17.066667 0 0 0-17.066666 17.066667V443.733333a17.066667 17.066667 0 1 0 34.133333 0v-5.12H546.133333v101.205334h-16.213333a17.066667 17.066667 0 1 0 0 34.133333H597.333333a17.066667 17.066667 0 0 0 17.066667-17.92z" fill="#3D3D63" p-id="5854"></path></svg>
           <span style="color: #c5e8ef">杜源霖</span>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
</header>

<main>

  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
          <form method="post" action="/result">
              First name:<br>
              <input type="text" name="firstname">
              <br>
              Last name:<br>
              <input type="text" name="lastname"><br>
              <p> <input type="submit" name="提交"></p>
          </form>
      </div>
    </div>
  </section>



</main>

<footer class="text-muted py-5">
  <div class="container">
    <p class="float-end mb-1">
      <a href="#">Back to top</a>
    </p>
  </div>
</footer>


    <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

      
  </body>
</html>
